<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- meta:vp -->
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>首页</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="js/index.js"></script>
</head>
<body>
	<!-- 大盒子:整个页面内容 -->
	<div class="jd_layout">
		<!-- 搜索头部 -->
		<header class="jd_header">
			<!-- 把搜索头部的内容水平居中显示,放到盒子里面 -->
			<div class="jd_header_box">
				<!-- logo -->
				<a href="#" class="icon_logo"></a>
				<!-- 输入框:小键盘 enter 改变成 搜索 按钮 -->
				<form action="#">
					<!-- 放大镜 -->
					<span class="icon_search"></span>
					<input type="search" placeholder="提示信息">
				</form>
				<!-- 按钮 -->
				<a href="#" class="login">登录</a>
			</div>
		</header>
		<!-- 轮播图部分 -->
		<div class="jd_banner">
			<!-- 10张图片(8+2) -->
			<ul class="clearfix">
				<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l2.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l3.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l4.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l5.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l6.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l7.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l8.jpg" alt=""></a></li>
				<li><a href="#"><img src="images/l1.jpg" alt=""></a></li>
			</ul>
			<!-- 8个圆点 -->
			<ul>
				<li class="now"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!-- 导航栏部分 -->
		<nav class="jd_nav">
			<ul class="clearfix">
				<li>
					<a href="#">
						<img src="images/nav0.png" alt="">
						<p>分类查询</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/nav1.png" alt="">
						<p>分类查询</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/nav2.png" alt="">
						<p>分类查询</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/nav3.png" alt="">
						<p>分类查询</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/nav4.png" alt="">
						<p>分类查询</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/nav5.png" alt="">
						<p>分类查询</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/nav6.png" alt="">
						<p>分类查询</p>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/nav7.png" alt="">
						<p>分类查询</p>
					</a>
				</li>
			</ul>
		</nav>
		<!-- 商品 -->
		<main class="jd_product">
			<!-- 4个商品子盒子 -->
			<section class="product_box jd_sk">
				<!-- 头部 -->
				<div class="product_box_tit no_border">
					<!-- 左边：图标，文字，倒计时 -->
					<div class="f_left m_l10">
						<!-- 图标 -->
						<span class="sk_icon"></span>
						<!-- 文字 -->
						<span class="sk_name m_l10">离活动结束还有</span>
						<!-- 倒计时信息 -->
						<div class="sk_time m_l10">
							<span>0</span>
							<span>天</span>
							<span>0</span>
							<span>0</span>
							<span>时</span>
							<span>0</span>
							<span>0</span>
							<span>分</span>
							<span>0</span>
							<span>0</span>
							<span>秒</span>
						</div>
					</div>
					<!-- 右边：更多 -->
					<div class="f_right m_r10"><a href="productslazyload.html">更多》</a></div>
				</div>
				<!-- 内容 -->
				<div class="product_box_con">
					<ul class="clearfix">
						<li>
							<a href="#"><img src="images/detail01.jpg" alt=""></a>
							<p>&yen;80.00</p>
							<p>&yen;100.00</p>
						</li>
						<li>
							<a href="#"><img src="images/detail02.jpg" alt=""></a>
							<p>&yen;60.00</p>
							<p>&yen;90.00</p>
						</li>
						<li>
							<a href="#"><img src="images/detail01.jpg" alt=""></a>
							<p>&yen;80.00</p>
							<p>&yen;100.00</p>
						</li>
					</ul>
				</div>
			</section>
			<section class="product_box">
				<!-- 头部 -->
				<div class="product_box_tit">
					<h3>京东超市</h3>
				</div>
				<!-- 内容 -->
				<div class="product_box_con clearfix">
					<a href="#" class="w_50 f_left b_right"><img src="images/cp1.jpg" alt=""></a>
					<a href="#" class="w_50 f_right b_bottom"><img src="images/cp2.jpg" alt=""></a>
					<a href="#" class="w_50 f_right"><img src="images/cp3.jpg" alt=""></a>
				</div>
			</section>
			<section class="product_box">
				<!-- 头部 -->
				<div class="product_box_tit">
					<h3>京东超市</h3>
				</div>
				<!-- 内容 -->
				<div class="product_box_con clearfix">
					<a href="#" class="w_50 f_right b_left"><img src="images/cp4.jpg" alt=""></a>
					<a href="#" class="w_50 f_left b_bottom"><img src="images/cp5.jpg" alt=""></a>
					<a href="#" class="w_50 f_left"><img src="images/cp6.jpg" alt=""></a>
				</div>
			</section>
			<section class="product_box">
				<!-- 头部 -->
				<div class="product_box_tit">
					<h3>京东超市</h3>
				</div>
				<!-- 内容 -->
				<div class="product_box_con clearfix">
					<a href="#" class="w_25 f_left"><img src="images/cp5.jpg" alt=""></a>
					<a href="#" class="w_25 f_left"><img src="images/cp6.jpg" alt=""></a>
					<a href="#" class="w_25 f_left"><img src="images/cp5.jpg" alt=""></a>
					<a href="#" class="w_25 f_left"><img src="images/cp6.jpg" alt=""></a>
				</div>
			</section>
		</main>
	</div>
</body>
</html>